<form action="" class="form-horizontal" role="form">
  <div class="form-group">
      <label class="col-sm-2 control-label">代理商名称</label>
      <div class="col-sm-2">
        <input type="text" class="form-control" name="name" placeholder="" datatype="*2-20" value="{$agent.name}">
      </div>
  </div>
  
  <empty name="agent.id">
  <div class="form-group">
    <label class="col-sm-2 control-label">推荐代理商</label>
    <div class="row">
      <div class="col-sm-3">
	      <input id="user-input" type="text" class="form-control" placeholder="输入代理商名或者email检索" autocomplete="off" value="">
	      <input id="user-aid" type="hidden" name="parent_id" value="">
	      <ul class="user-list" id="user-list"></ul>
      </div>
    </div>
    <script type="text/javascript">
		var AutoCompleteList = function( cfg ) {
			  this.init( cfg );
		};
		AutoCompleteList.prototype.init = function( cfg ) {
			  this.cfg = cfg;
			  var inputId = cfg['inputId'];
			  var listId = cfg['listId'];
			  var url = cfg['url'];
			  var showListCallBack = cfg['showListCallBack'];
			  var clickListCallBack = cfg['clickListCallBack'];
			  var beforeListCallBack = cfg['beforeListCallBack'];
			  
			  $( "#"+inputId ).on( "keyup focus", function() {
				    var v = $( this ).val();
				    var params = {"name": v};
				    beforeListCallBack && beforeListCallBack( params );
				    $.post( url, params, function(data) {
				        data.extra && showListCallBack( data.extra );
				    });
			  });
			  
			  $( "#"+inputId ).on( "blur", function() {
				    $( "#"+listId ).slideUp();
			  });
			  
			  // 点击选择检索出的列表
			  $( "#"+listId ).delegate( "li", "click", clickListCallBack );
		};
		new AutoCompleteList({
			  'inputId' : 'user-input',
			  'listId' : 'user-list',
			  'url' :  "__CONTROLLER__/getAgentList",
			  'clickListCallBack' : function() {
				    $( "#user-input" ).val( $(this).attr( "data-email" ) );
				    $( "#user-aid" ).val( $(this).attr("data-aid") );
			  },
			  'showListCallBack' : function( list ) {
				    var html = "";
				    for(var i = 0; item = list[i]; i++) {
				      html += "<li data-email='"+ item.email +"' data-aid='" + item.id + "'><span class='user-name'>" + item.name + "</span><i class='user-email'>" + item.email + "</i></li>";
				    };
				    $( "#user-list" ).html( html ).slideDown();
			  }
		});
  </script>
  </div>
  </empty>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">代理等级</label>
    <div class="row">
      <div class="col-sm-2">
        <select class="form-control" id="level" name="level" datatype="*">{$agent.levelOptions}</select>
      </div>
    </div>
  </div>
  
  <div class="form-group">
      <label class="col-sm-2 control-label">邮箱</label>
      <div class="col-sm-3">
        <input type="email" class="form-control" name="email" placeholder="作为客户登陆后台账户"  datatype="e" value="{$agent.email}">
      </div>
  </div>
  
  <empty name="agent.id">
  <div class="form-group">
		<label class="col-sm-2 control-label">登录密码</label>
		<div class="col-sm-3">
			<input type="password" class="form-control" name="password" placeholder="密码大于6位小于16位" datatype="*6-16">
		</div>
  </div>
  
  <div class="form-group">
		<label class="col-sm-2 control-label">重复登录密码</label>
		<div class="col-sm-3">
			<input type="password" class="form-control" placeholder="重复刚才输入的密码" datatype="*" recheck="password">
		</div>
  </div>
  </empty>
	
  <div class="form-group">
    <label class="col-sm-2 control-label">联系人</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="contacts" placeholder="客户联系人" datatype="*" value="{$agent.contacts}"/>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">联系人手机</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" name="tel" placeholder="客户联系人手机" datatype="phone" value="{$agent.tel}"/>
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">代理商地区</label>
    <div class="row">
      <div class="col-sm-2">
        <select class="form-control" id="province" name="province" datatype="*">{$agent.provinceOptions}</select>
      </div>
      <div class="col-sm-2">
        <select class="form-control" id="city" name="city" datatype="*">{$agent.cityOptions}</select>
      </div>
      <div class="col-sm-2">
        <select class="form-control" id="area" name="area" datatype="*">{$agent.areaOptions}</select>
      </div>    
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">代理商具体地址</label>
    <div class="col-sm-4">
      <input type="text" class="form-control" name="address" placeholder="客户的具体地址" datatype="*" value="{$agent.address}" />
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">代理商服务开始时间</label>
    <div class="col-sm-2">
      <input type="text" id="begin-time" class="form-control" name="begin_time" placeholder="选择客户服务开始的时间" datatype="*" value="<notempty name='agent.begin_time'>{$agent.begin_time|date='Y-m-d H:i',###}</notempty>">
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">代理商服务结束时间</label>
    <div class="col-sm-2">
      <input type="text" id="end-time" class="form-control" name="end_time" placeholder="选择客户服务结束的时间" datatype="*" value="<notempty name='agent.end_time'>{$agent.end_time|date='Y-m-d H:i',###}</notempty>">
    </div>
  </div>
  
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-8">
      <input type="hidden" name="id" value="{$agent.id}"/>
      <empty name="agent.id"><input type="hidden" name="wechat_uid" value="{$agent.wechat_uid}"/></empty>
      <button type="submit" class="btn btn-primary submit" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/save">保存更改</button>
    </div>
  </div>
  
</form>

<style type="text/css">
  .user {
    position: relative;
  }
  .user-list {
    position: absolute;
    top: 100%;
    left: 15px;
    right: 15px;
    display: none;
    z-index: 10;
    max-height: 150px;
    overflow: auto;
    background-color: #fff;
    border: 1px solid #ccc;
  }
  .user-list li {
    padding: .4em;
    border-bottom: 1px solid #e9e9e9;
  }
  .user-list li:last-of-type {
    border-bottom: none;
  }
  .user-list li:hover {
    background-color: #eee;
  }
  .user-list .user-name {
    font-weight: 500;
  }
  .user-list .user-email {
    float: right;
    font-size: .8em;
  }
</style>

<!-- datetimepicker -->
<link rel="stylesheet" href="__PUBLIC__/Style/Common/datetimepicker/bootstrap-datetimepicker.min.css">
<script src="__PUBLIC__/Style/Common/datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="__PUBLIC__/Style/Common/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
  $(function(){
    $("#province").change(function(){
      var pro = $(this).val()
      $.post("__CONTROLLER__/getCityPost", {code: pro} ,function(data){
        $("#city").html(data);
      });
    });
    
    $("#city").change(function(){
      var cit = $(this).val()
      $.post("__CONTROLLER__/getAreaPost", {code: cit} ,function(data){
        $("#area").html(data);
      });
    });
    
    $("#begin-time").datetimepicker({
      "language": "zh-CN"
    });
    
    $("#end-time").datetimepicker({
      "language": "zh-CN"
    });
  });
</script>